<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .canvas {
                display: block;
                margin: 25px auto;
                border: 1px solid #aaa;
            }
        </style>
        <script>
            addEventListener("load", function () {
                const cvs = document.querySelector(".canvas");
                cvs.width = 650;
                cvs.height = 650;
                const ctx = cvs.getContext("2d");
                /*
                    网格案例分析：
                        循环嵌套：生成多个矩形
                            画布650*650，故一个矩形划分为50*50即可（其实65*65更合适）
                        矩形坐标位置：有规则
                            m行n列  (m*50,n*50,50,50)
                            m、n从0开始
                        颜色：有规则
                            (m+n)%2
                            注意，它和(m%2)+(n%2)是不同的条件
                */
                // 矩形大小、个数
                const rectLength = 50; // 矩形宽高值越小，格子越紧凑
                const horizontalNums = Math.floor(cvs.width / rectLength); // floor不够一格子的会被留出空间，ceil不够一格的也会占满空间
                const verticalNums = Math.floor(cvs.height / rectLength);
                for (let i = 0; i < horizontalNums; i++) {
                    for (let j = 0; j < verticalNums; j++) {
                        // if (i % 2) {
                        //     if (j % 2) {
                        //         ctx.fillStyle = "blue";
                        //     } else {
                        //         ctx.fillStyle = "orange";
                        //     }
                        // } else {
                        //     if (j % 2) {
                        //         ctx.fillStyle = "orange";
                        //     } else {
                        //         ctx.fillStyle = "blue";
                        //     }
                        // }
                        // ctx.fillRect(i * rectLength, j * rectLength, rectLength, rectLength);

                        if ((i + j) % 2) {
                            ctx.fillStyle = "blue";
                        } else {
                            ctx.fillStyle = "orange";
                        }
                        ctx.fillRect(i * rectLength, j * rectLength, rectLength, rectLength);
                    }
                }
            });
        </script>
    </head>
    <body>
        <canvas class="canvas">你的浏览器不支持canvas，请升级浏览器版本或更换浏览器！</canvas>
    </body>
</html>
